<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/commons/js/basejs.jsp"%>
<%@ include file="/commons/css/basecss.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="${jsPath }/sweetAlert/sweetalert.css" type="text/css"/>
</head>

<body id="mainBody" class="easyui-layout">
	<input class="easyui-textbox" style="width: 100px;">
	<table id="treeGrid"></table>
	<div class="easyui-layout" data-options="fit:true,border:false"
		style="overflow: hidden; width: 100%">
		<div data-options="region:'center',border:false"></div>
	</div>
	<div data-options="region:'center'" style="overflow-x: hidden">
		<div id="tabs" class="easyui-tabs"
			data-options="fit:true,border:false">
			<div id="systemMenu" title="系统平台菜单">
				<table id="tt0" style="width:100%;height:100%">
				</table>  
			</div>
			<div id="factoryMenu" title="厂商平台菜单">
				<table id="tt1" style="width:100%;height:100%"></table>  
			</div>
			<div id="agencyMenu" title="经销商菜单">
				<table id="tt2" style="width:100%;height:100%"></table>  
			</div>
			<div id="settingMenu" title="设置菜单">
				<table id="tt3" style="width:100%;height:100%"></table>  
			</div>
		</div>
		<div id="datagrid_toolbar">
			<a onclick="add(this);" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">添加</a>
			<a onclick="load(this)" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">编辑</a>
	       	<a onclick="removes(this)" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-del'">删除</a>
		</div>
	<div id="win" class="easyui-window" title="新增菜单" style="width:520px;height:380px"   
        data-options="iconCls:'icon-save',modal:true" closed="true">
   		<form id="add" method="post">
   			<div style="position:absolute; left: 12%;top:12%" >
   				<table style="border-collapse:separate; border-spacing:0px 10px;">
				    <tr>
					    <td>名&nbsp;&nbsp;称:</td>
					    <td>
					    	&nbsp;&nbsp;<input class="easyui-textbox" type="text" name="name" data-options="required:true" style="width: 150px"/>
					    </td>
				    </tr>
				    <tr>
					    <td>资源路径:</td>
					    <td>
					    	 &nbsp;&nbsp;<input id="url" class="easyui-textbox" type="text" name="link" style="width: 150px"/>   
					    </td>
				    </tr>
				    <tr>
					    <td>permission:</td>
					    <td>
					    	&nbsp;&nbsp;<input id="permission" class="easyui-textbox" type="text" name="permit" style="width: 150px"/>   
					    </td>
				    </tr>
				    <tr>
					    <td>排&nbsp;&nbsp;序:</td>
					    <td>
					    	&nbsp;&nbsp;<input id="seq" class="easyui-textbox" type="text" name="sequence" data-options="required:false" style="width: 150px"/> 
					    </td>
				    </tr>
				    <tr>
					    <td>图&nbsp;&nbsp;标:</td>
					    <td>
					    	&nbsp;&nbsp;<input id="icon" class="easyui-textbox" type="text" name="img" data-options="required:false" style="width: 150px"/> 
					    </td>
				    </tr>
				    <tr>
					    <td>备&nbsp;&nbsp;注:</td>
					    <td>
					    	&nbsp;&nbsp;<input id="remark" class="easyui-textbox" type="text" data-options="multiline:true" name="mark" style="width:220px"/>
					    </td>
				    </tr>
				    <tr>
					    <td>上&nbsp;&nbsp;级:</td>
					    <td>
					    	&nbsp;&nbsp;<input class="easyui-textbox" type="text" name="text" disabled="disabled" value="最上级" style="width:125px">&nbsp;&nbsp;&nbsp;&nbsp;是否可见：
					    	<select id="visible" class="easyui-combobox" style="width:100px;" editable=false panelHeight=auto>
							    <option value="1">可见</option>   
							    <option value="0">不可见</option>     
							</select>
					    	<input id="pid"  type="text" name="id" hidden = "hidden">
			       			<input id="classify"  type="text" hidden = "hidden" value="0">
					    </td>
				    </tr>
			        <tr>
			           <td></td>
					   <td><br>
					    	<a  href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submit(this)">提&nbsp;交</a>&nbsp;&nbsp;&nbsp;
			    			<a  href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="closeWin(this)">取&nbsp;消</a>
					   </td>
				    </tr>
			    </table> 
		    </div>    
		</form>
	</div>
    <div id="win2" class="easyui-window" title="编辑菜单" style="width:520px;height:380px"   
        data-options="iconCls:'icon-save',modal:true" closed="true">
   		<form id="update" method="post">
   			<div style="position:absolute; left: 12%;top:12%" >
   				<table style="border-collapse:separate; border-spacing:0px 10px;">
				    <tr>
					    <td>名&nbsp;&nbsp;称:</td>
					    <td>
					    	&nbsp;&nbsp;<input id="name2" class="easyui-textbox" type="text" name="text" data-options="required:true" style="width: 150px"/>
					    </td>
				    </tr>
				    <tr>
					    <td>资源路径:</td>
					    <td>
					    	 &nbsp;&nbsp;<input  class="easyui-textbox" type="text" name="url" style="width: 150px"/>   
					    </td>
				    </tr>
				    <tr>
					    <td>permission:</td>
					    <td>
					    	&nbsp;&nbsp;<input class="easyui-textbox" type="text" name="permission" style="width: 150px"/>   
					    </td>
				    </tr>
				    <tr>
					    <td>排&nbsp;&nbsp;序:</td>
					    <td>
					    	&nbsp;&nbsp;<input  class="easyui-textbox" type="text" name="seq" data-options="required:false" style="width: 150px"/> 
					    </td>
				    </tr>
				    <tr>
					    <td>图&nbsp;&nbsp;标:</td>
					    <td>
					    	&nbsp;&nbsp;<input class="easyui-textbox" type="text" name="icon" data-options="required:false" style="width: 150px"/> 
					    </td>
				    </tr>
				    <tr>
					    <td>备&nbsp;&nbsp;注:</td>
					    <td>
					    	&nbsp;&nbsp;<input class="easyui-textbox" type="text" data-options="multiline:true" name="remark" style="width:220px"/>
					    </td>
				    </tr>
				    <tr>
					    <td>是否可见：</td>
					    <td>
					    	&nbsp;&nbsp;<select id="visible2" class="easyui-combobox" style="width:100px;" editable=false panelHeight=auto>
							    <option value="1">可见</option>   
							    <option value="0">不可见</option>     
							</select>
					    	<input type="text" name="id" hidden = "hidden">
			       			<input id="classify2"  type="text" hidden = "hidden" value="0">
					    </td>
				    </tr>
			        <tr>
			           <td></td>
					   <td><br>
					   		<a  href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="update(this)">保&nbsp;存</a>&nbsp;&nbsp;&nbsp;&nbsp;
			    			<a  href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="closeWin(this)">取&nbsp;消</a>
					   </td>
				    </tr>
			    </table> 
		    </div>    
		</form>
	</div>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		var temp = 0;
		var list = [];
		var IsCheckFlag = false; //标示是否是勾选复选框选中行的，true - 是 , false - 否
		var index ; //标示选中的序列
		$('#tabs').tabs({
			border : false,
			onSelect : function(title) {
				if (title == "系统平台菜单") {
					temp = 0;
				} else if (title == "厂商平台菜单") {
					temp = 1;
				} else if (title == "经销商菜单") {
					temp = 2
				} else {
					temp = 3
				}
				$('#classify').val(temp);
				$('#tt'+temp).treegrid({    
				    url:"${path}/systemMenu/menuList?classify="+temp,    
				    idField:'id',    
				    treeField:'text',
				    toolbar:'#datagrid_toolbar',
				    checkOnSelect: true,
					selectOnCheck: true,
					singleSelect: true,
				    nowrap: true, 
				    fitColumns:true,
				    rownumbers: true, //显示行号
					showfooter: true,//显示行尾
				    columns:[[
						{field:'id', title :'id', width : 50, checkbox: true},
				        {field:'text',title:'菜单',width:120,align : 'left'},    
				        {field:'url',title:'资源路径',width:80,align : 'left'},
				        {field:'permission',title:'permission',width:80,align : 'left'},
				        {field:'seq',title:'排序',width:50,align : 'center'},
				        {field:'icon',title:'图标',width:80,align : 'left'},
				        {field:'type',title:'类型',width:80,align : 'left',
				        	formatter:function(value,row,index){
				        		if (1==value) return '子菜单';
				        		else if (0==value) return '主菜单';
				        		else return '按钮';
			        		}
				        },
			        	{field:'visible',title:'状态',width:80,align : 'left',
			        		formatter:function(value,row,index){
				        		if (1==value) return '可见';
				        		else return '不可见';
				        	}
			        	},
				        {field:'remark',title:'备注',width:80,align : 'left',sortable:true},
			        	{field:'operate',title:'操作',width:60,align : 'center',
				        	formatter:function(value,row,index){
				        		var a = '<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-del\',plain:true" onclick="move('+row.id+','+1+')">上移</a>';
				        		var b ='<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-del\',plain:true" onclick="move('+row.id+','+-1+')">下移</a>';
				        		return a+"&nbsp;&nbsp;&nbsp;"+b;
		        			}
				        }
				    ]],
			    	 onSelect: function (rowIndex, rowData) {
		    	         if (!IsCheckFlag && index != rowIndex) {
		    	        	 index=rowIndex;
		    	             IsCheckFlag = true;
		    	         }else if(IsCheckFlag && index != rowIndex){
		    	        	 index=rowIndex;
		    	             IsCheckFlag = true;
		    	         }else if(!IsCheckFlag && index == rowIndex){
		    	        	 index=rowIndex;
		    	             IsCheckFlag = true;
		    	         }else{
		    	        	 $("#tt"+temp).datagrid("clearSelections");
		    	        	 IsCheckFlag = false;
		    	         }
		    	     }               
				});
			}
		});
		$('#tt'+temp).treegrid({    
		    url:"${path}/systemMenu/menuList?classify="+temp,    
		    idField:'id',    
		    treeField:'text',
		    toolbar:'#datagrid_toolbar',
		    checkOnSelect: true,
			selectOnCheck: true,
			singleSelect: true,
		    nowrap: true, 
		    fitColumns:true,
		    rownumbers: true, //显示行号
			showfooter: true,//显示行尾
		    columns:[[
				{field:'id', title :'id', width : 50, checkbox: true},
		        {field:'text',title:'菜单',width:120,align : 'left'},    
		        {field:'url',title:'资源路径',width:80,align : 'left'},
		        {field:'permission',title:'permission',width:80,align : 'left'},
		        {field:'seq',title:'排序',width:50,align : 'center'},
		        {field:'icon',title:'图标',width:80,align : 'left'},
		        {field:'type',title:'类型',width:80,align : 'left',
		        	formatter:function(value,row,index){
		        		if (1==value) return '子菜单';
		        		else if (0==value) return '主菜单';
		        		else return '按钮';
	        		}
		        },
	        	{field:'visible',title:'状态',width:80,align : 'left',
	        		formatter:function(value,row,index){
		        		if (1==value) return '可见';
		        		else return '不可见';
		        	}
	        	},
		        {field:'remark',title:'备注',width:80,align : 'left'},
	        	{field:'operate',title:'操作',width:60,align : 'center',
		        	formatter:function(value,row,index){
		        		var a = '<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-del\',plain:true" onclick="move('+row.id+','+1+')">上移</a>';
		        		var b ='<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:\'icon-del\',plain:true" onclick="move('+row.id+','+-1+')">下移</a>';
		        		return a+"&nbsp;&nbsp;&nbsp;"+b;
        			}
		        }
		    ]],
	    	 onSelect: function (rowIndex, rowData) {
    	         if (!IsCheckFlag && index != rowIndex) {
    	        	 index=rowIndex;
    	             IsCheckFlag = true;
    	         }else if(IsCheckFlag && index != rowIndex){
    	        	 index=rowIndex;
    	             IsCheckFlag = true;
    	         }else if(!IsCheckFlag && index == rowIndex){
    	        	 index=rowIndex;
    	             IsCheckFlag = true;
    	         }else{
    	        	 $("#tt"+temp).datagrid("clearSelections");
    	        	 IsCheckFlag = false;
    	         }
    	     }               
		}); 
	});
	
	function move(id,flag){
		var classify=$('#classify').val();
		var changeId;
		if(flag>0){
			changeId = $("tr[node-id='" + id + "']").prev("tr").attr("node-id");
			if (!changeId) {
			    if ($("tr[node-id='" + id + "']").prev("tr").attr("class") == "treegrid-tr-tree") {
			    	changeId = $("tr[node-id='" + id + "']").prev("tr").prev("tr").attr("node-id");
			    }
			}
		}else{
			changeId = $("tr[node-id='" + id + "']").next("tr").attr("node-id");
			if (!changeId) {
			    if ($("tr[node-id='" + id + "']").next("tr").attr("class") == "treegrid-tr-tree") {
			    	changeId = $("tr[node-id='" + id + "']").next("tr").next("tr").attr("node-id");
			    }
			}
		}
		if(changeId==null){
			swal({
				title : '',
				text : "已到达顶部或底部",
				icon : 'warning',
				timer : 1500,
				buttons : false,
        	})
			return;
		}
		var change=$("#tt"+classify).treegrid("find",changeId);
		var select=$("#tt"+classify).treegrid("find",id);
		$.ajax({
			url:"${path}/systemMenu/move",
			data:{
				id:id,
				seq:select.seq,
				changeId:changeId,
				changeSeq:change.seq
			},
			type:"post",
			dataType:"json",
			success:function(data){
				$('#tt'+classify).treegrid("reload");
			}
		});
	}
	function add(rec){
		var classify=$('#classify').val();
		var line = $('#tt'+classify).treegrid("getSelected");
		if(line==null){
			$('#add').form('clear');
			$('#add').form('reset');
			$("#win").window('open');
		}else{
			$('#add').form('load',line);
			$("#win").window('open');
		}
	}
	function closeWin(){
		$("#win,#win2").window('close');
	}
	function load(){
		var temp = $("#classify").val();
		var line = $("#tt"+temp).treegrid("getSelected");
		if(line==null){
			swal({
				title : '',
				text : "请选择相应记录",
				icon : 'warning',
				timer : 1500,
				buttons : false,
        	})
		}else{
			$("#win2").window('open');
			$("#update").form("load",line);
		}
	}
	function submit(){
		var classify=$('#classify').val();
		$('#add').form('submit', {    
		    url:"${path}/systemMenu/insert",    
		    onSubmit: function(param){
		    	param.url=$('#url').textbox('getValue');
	 	    	param.permission=$('#permission').textbox('getValue');
		    	param.seq=$('#seq').textbox('getValue');
		    	param.remark=$('#remark').textbox('getValue');
		    	param.parentId=$('#pid').val();
		    	param.visible=$('#visible').combobox('getValue');
		    	param.classify=classify;
		    	param.icon=$('#icon').textbox('getValue');
		    },    
		    success:function(data){
		    	var json = JSON.parse(data);
		        if(json.success){
		        	swal({
						title : '',
						text : json.message,
						icon : 'success',
						timer : 1500,
						buttons : false,
		        	})
		        	$("#win").window('close');
		        	$("#add").form("clear");
		        	$("#add").form("reset");
		        	$('#tt'+classify).treegrid("reload");
		        }else{
		        	swal({
						title : '',
						text : json.message,
						icon : 'warning',
						timer : 1500,
						buttons : false,
		        	})
		        }   
		    }    
		});
	}
	
	function update(){
		var classify=$('#classify').val();

		$('#update').form('submit', {    
		    url:"${path}/systemMenu/update",    
		    onSubmit: function(param){
		    	param.name=$('#name2').textbox('getValue');
		    	param.visible=$('#visible2').combobox('getValue')
		    	param.classify=classify;
		    },    
		    success:function(data){
		    	var json = JSON.parse(data);
		        if(json.success){
		        	swal({
						title : '',
						text : json.message,
						icon : 'success',
						timer : 1500,
						buttons : false,
		        	})
		        	$("#win2").window('close');
		        	$("#update").form("clear");
		        	$("#update").form("reset");
		        	$('#tt'+classify).treegrid("reload");
		        }else{
		        	swal({
						title : '',
						text : json.message,
						icon : 'warning',
						timer : 1500,
						buttons : false,
		        	})
		        }   
		    }    
		});
	}
	
	function removes(){
		var classify=$('#classify').val();
		var checked = $('#tt'+classify).treegrid("getChecked");
 		 $.ajax({
			url:"${path}/systemMenu/deletes",
			data:{id:checked[0].id,number:checked[0].number},
			type:"post",
			dataType:"json",
			success:function(data){
		        if(data.success){
					swal({
						title : '',
						text : data.message,
						icon : 'success',
						timer : 1500,
						buttons : false,
		        	})
		        	 $('#tt'+classify).treegrid("reload");
		        }else{
		        	swal({
						title : '',
						text : data.message,
						icon : 'warning',
						timer : 1500,
						buttons : false,
		        	})
		        }  
			}
		}); 
	}
	
	function test(){
		var a=$("span[class='tree-checkbox tree-checkbox1'],span[class='tree-checkbox tree-checkbox2']").parent().parent().parent();
		var str='';
		$.each(a,function(i,item){
			var id='#'+item.id;
			str=str+","+$(id).attr('node-id');
			
		});
		alert(str);
		//alert(a);
	}
</script>
</html>